<ng-container *ngIf="expandedRow">
  <nav
    ngbNav
    #nav="ngbNav"
    class="nav-tabs"
    cdStatefulTab="sync-policy-details">
    <ng-container ngbNavItem="flow">
      <a
        ngbNavLink
        i18n>Flow</a>
      <ng-template ngbNavContent>
        <legend>
          Symmetrical
          <cd-help-text>
            It can define symmetrical data flow, in which multiple zones sync data from each other.
          </cd-help-text>
        </legend>
        <cd-table
          #table
          [autoReload]="false"
          [data]="symmetricalFlowData"
          [columns]="symmetricalFlowCols"
          columnMode="flex"
          selectionType="multiClick"
          [searchableObjects]="true"
          [hasDetails]="false"
          [serverSide]="false"
          [count]="0"
          [maxLimit]="25"
          [toolHeader]="true"
          (updateSelection)="updateSelection($event, flowType.symmetrical)"
          (fetchData)="loadData($event)">
          <div class="table-actions btn-toolbar">
            <cd-table-actions
              [permission]="permission"
              [selection]="symFlowSelection"
              class="btn-group"
              [tableActions]="symFlowTableActions" >
            </cd-table-actions>
          </div>
        </cd-table>
        <legend>
          Directional
          <cd-help-text>
            It can define directional data flow, in which the data moves in one way, from one zone to another.
          </cd-help-text>
        </legend>
        <cd-table
          #table
          [autoReload]="false"
          [data]="directionalFlowData"
          [columns]="directionalFlowCols"
          columnMode="flex"
          selectionType="multiClick"
          [searchableObjects]="true"
          [hasDetails]="false"
          [serverSide]="false"
          [count]="0"
          [maxLimit]="25"
          [toolHeader]="true"
          (updateSelection)="updateSelection($event, flowType.directional)"
          (fetchData)="loadData($event)">
          <div class="table-actions btn-toolbar">
            <cd-table-actions
              [permission]="permission"
              [selection]="dirFlowSelection"
              class="btn-group"
              [tableActions]="dirFlowTableActions">
            </cd-table-actions>
          </div>
        </cd-table>
        <cd-alert-panel
          *ngIf="dirFlowSelection.hasSelection"
          type="info"
          title="Directional Flow 'edit' & 'delete' actions disabled"
          i18n-title
          i18n>
          Due to some internal dependencies these actions are disabled, it will get enabled once the issue gets resolved.
        </cd-alert-panel>
      </ng-template>
    </ng-container>
    <ng-container ngbNavItem="pipe">
      <a ngbNavLink
         i18n>Pipe</a>
      <ng-template ngbNavContent>
        <legend i18n>
          Pipe
          <cd-help-text>
            A pipe defines the actual buckets that can use these data flows, and the properties that are associated with it.
          </cd-help-text>
        </legend>
        <cd-table
        #table
        [data]="pipeData"
        [columns]="pipeCols"
        selectionType="multiClick"
        [searchableObjects]="true"
        [hasDetails]="false"
        [serverSide]="false"
        [toolHeader]="true"
        (updateSelection)="pipeSelection = $event"
        (fetchData)="loadData($event)">
        <div class="table-actions btn-toolbar">
          <cd-table-actions
            [permission]="permission"
            [selection]="pipeSelection"
            class="btn-group"
            [tableActions]="pipeTableActions">
          </cd-table-actions>
        </div>
        </cd-table>
      </ng-template>
    </ng-container>
  </nav>
  <div [ngbNavOutlet]="nav"></div>
</ng-container>

<ng-template #deleteTpl>
  <cd-alert-panel type="danger"
                  i18n>
    Are you sure you want to delete these Flow?
  </cd-alert-panel>
</ng-template>
